/* eslint-disable array-callback-return */
import React, { Component } from 'react'
import './index.scss'
import { Icon ,Pagination} from 'antd';
// import { BrowserRouter as Router, Link } from 'react-router-dom'
// import { GoodsInfo } from '../GoodsInfo'
export default class index extends Component {

  state = {
    Type: "HomeData",
    type: "first",
    GS: true,
    goodsData: [],
    chooseTag: [],
    goodslistdata: [],
    tag: []
  }
  render() {
    return (
      
      <div className="goodslist">
        {this.state.goodsData.map((item, index) => {
          if (item.type === this.state.type) {
            return (
              <main key={index}>
                <header>
                  <div className="title">
                    <p className="fs18">{item.name} <span className="fs16"><b className="fs18">{item.alldiscount}</b>折封顶</span></p>
                    <span className="love_it"><a href="#####"><Icon type="heart" /> 收藏商品</a>(1719661)</span>
                  </div>
                  <div className="filter-groups">
                    <div>
                      <span></span>
                    </div>
                    {
                      this.state.tag.map(groups => {
                        // eslint-disable-next-line no-lone-blocks
                        {/* console.log(item) */ }
                        return <div className="claerFixed" key={groups.title} >
                          <span className="fl">{groups.title}</span>
                          <div className="tagContent" data-select={true}>
                            <ul className="fl">
                              {
                                groups.list.map(singleTag => {
                                  return <li key={singleTag} onClick={this.thisli}>{singleTag}</li>
                                })
                              }
                            </ul>
                            {
                              groups.count > 8 ? <span className="more fs12 fl" onClick={this.moreTag}>更多</span> : null
                            }
                          </div>
                          {
                            groups.count > 1 ? <em className="MultiSelect fs12 fr" onClick={this.selectMore}>+多选</em> : null
                          }
                        </div>
                      })
                    }
                    <button className="fold" onClick={this.changeList}>
                      {/* {this.state.GS ? '更多选项 ﹀' : '点击收起 ︿'} */}
                      {this.state.GS ?
                        <span>更多选项 <Icon type="down" /></span> :
                        <span>点击收起 <Icon type="up" /></span>
                      }
                    </button>
                  </div>
                </header>
                {/* 筛选区开始 */}
                <div className="pro-list">
                  <ul className="sort">
                    <li className="sortByLi sortByThisLi" onClick={this.sortByLi}>综合</li>
                    <li className="sortByLi" onClick={this.sortByLi}>销量</li>
                    <li className="sortByLi" onClick={this.sortByLi}>价格</li>
                    <li className="sortByLi" onClick={this.sortByLi}>折扣</li>
                    <li><input type="checkbox" name="hasgoods" id="" /> 只看有货商品</li>
                    <li className="price_scope"><input type="text" name="smaller" id="" /> - <input type="text" name="larger" id="" /></li>
                  </ul>
                  <p className="goods_count">
                    <span className="">16</span>件商品
                    <span className="secondspan">1</span>/1
                    <span className="arrow"><Icon type="left" /></span>
                    <span className="arrow"><Icon type="right" /></span>
                  </p>
                </div>
                {/* 筛选区结束 */}
                <section className="c-filter J_fileter_frame is-filter-collapse">
                  <div className="list">
                    {
                      this.state.goodslistdata.map(ship => {
                        return (
                          <div className="goods-inner" key={ship.pro_id}>
                            <div className="goods-slide">
                              <div className="goods-image">
                                {/* <Link to="/goodslist/:Type/:type/:id"> */}
                                <div className="box" onClick={this.handleGoToInfo.bind(this, ship.pro_id)}>
                                  <img src={ship.pro_img} alt="" />
                                  <div className="goods-business-tag">
                                    {/* 判断tag标签 */}
                                    {
                                      ship.pro_tag === "hot" ?
                                        <img src="//h2.appsimg.com/b.appsimg.com/upload/momin/2019/09/02/160/1567393657900.png" alt="" /> :
                                        ship.pro_tag === "new" ?
                                          <img src="//h2.appsimg.com/b.appsimg.com/upload/momin/2019/09/02/115/1567393701102.png" alt="" /> : null
                                    }
                                  </div>
                                  <div className="goods-corner-tag">
                                  </div>
                                  {/* </Link> */}
                                </div>
                              </div>
                              <div className="goods-special-price">
                                <div className="goods-price fs14">
                                  折后价
                                  <span className="RMB">￥</span>
                                  <span className="special-price fs24">{ship.pro_discount_price}</span>
                                </div>
                              </div>
                            </div>
                            <div className="goods-info goods-price-info">
                              <div className="goods-price-wrapper">
                                <em className="bolder">
                                  <span className="vip-price">唯品价 </span>
                                  <span className="price"> {ship.pro_vip_price}</span>
                                </em>
                              </div>
                              <del className="goods-market-price">
                                ￥{ship.pro_market_price}
                              </del>
                              <span className="goods-discount fs14">
                                {ship.pro_discount}折
                              </span>
                            </div>
                            <h4 className="goods-info  goods-title-info" onClick={this.handleGoToInfo.bind(this, ship.pro_id)}>
                              {ship.pro_title}
                            </h4>
                          </div>
                        )
                      })
                    }
                  </div>
                  <Pagination defaultCurrent={1} total={14 * 8} hideOnSinglePage={true} className='PageNum' />
                </section>
              </main>
            )
          }
        })}
      </div >
    )
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getData()
    // this.getnewdata()
    this.getgoodslist()
    // this.moreTag()
    // console.log(this.props)
    // const params = new URLSearchParams(this.props.local.search)
    // console.log(params.get('Type'), params.get('type'))
    // console.log(this.props.match.params.Type, this.props.match.params.type)
    this.getGoodsType()
  }
  // shouldComponentUpdate() {
  //   this.changeList()
  // }
  changeList = (e) => {
    this.setState({
      GS: !this.state.GS
    })
    let kids = e.currentTarget.parentElement.childNodes
    // console.log(kids)
    kids.forEach((item, index) => {
      if (item.tagName === 'DIV' && index >= 4 && !this.state.GS) {
        // console.log(item)
        item.style.display = "none"
      } else {
        item.style.display = "flex"
      }
    });

  }
  getData = async () => {
    //根据类型获取对应数据
    const { data } = await this.$axios.get(`http://localhost:5000/GoodsList?Type=${this.state.Type}`)
    // const {data} = await this.$axios.get(`http://127.0.0.1:8888/api/goodslist?Type=${this.state.Type}`)
    // console.log(data)
    this.setState({
      goodsData: data[0].data,
      tag: data[0].data[0].flitertag,
      // goodslistdata: data[0].data[0].goodslistdata
    })
    // console.log(data)
  }
  moreTag = (e) => {
    // console.log(e.currentTarget.parentElement.childNodes[0])
    if (e.currentTarget.childNodes[0].data === "更多") {
      e.currentTarget.childNodes[0].data = "收起";
      e.currentTarget.parentElement.childNodes[0].classList.add("thisUl");
    } else {
      e.currentTarget.childNodes[0].data = "更多";
      e.currentTarget.parentElement.childNodes[0].classList.remove("thisUl");
    }
  }
  thisli = (e) => {
    // this.setState({
    //   chooseTag: this.state.chooseTag.push(e.currentTarget)
    // })
    // console.log(this.state.chooseTag)
    // console.log(e.currentTarget.parentElement.childNodes)
    // console.log(e.currentTarget.parentElement.parentElement.parentElement.lastChild)
    let el = e.currentTarget.parentElement.parentElement.parentElement.lastChild;
    var newArr = Array.from(el.classList)
    // console.log(newArr.includes("MoreAndMore"))
    // console.log(Array.isArray(newArr))
    // console.log(newArr)
    // var flag = false
    // el.classList.forEach(async item => {
    //   await console.log(item === "MoreAndMore")
    //   // if (item === "MoreAndMore") {
    //   //   return true
    //   // }
    // })
    // newArr.some((MoreAndMore) => {
    //   console.log(MoreAndMore === "MoreAndMore")
    //   return MoreAndMore === "MoreAndMore"
    // })
    if (!newArr.includes("MoreAndMore")) {
      if (e.currentTarget.className === "thisLi") {
        e.currentTarget.classList.remove("thisLi")
      } else {
        e.currentTarget.parentElement.childNodes.forEach(item => {
          item.classList.remove("thisLi")
        })
        e.currentTarget.classList.add("thisLi")
      }
    } else {
      if (e.currentTarget.className === "thisLi") {
        e.currentTarget.classList.remove("thisLi")
      } else {
        e.currentTarget.classList.add("thisLi")
      }
    }

  }
  selectMore = (e) => {
    // console.log(e.currentTarget.classList.indexof("MoreAndMore"))
    // if (e.currentTarget.classList.includes("MoreAndMore")) {
    //   e.currentTarget.classList.remove("MoreAndMore")
    // } else {
    //   e.currentTarget.classList.add("MoreAndMore")
    // }
    e.currentTarget.classList.forEach(item => {
      if (item === "MoreAndMore") {
        e.currentTarget.classList.remove("MoreAndMore")
        let Lis = e.currentTarget.parentElement.childNodes[1].childNodes[0].childNodes
        Lis.forEach(item => {
          item.classList.remove('thisLi')
        })
        e.currentTarget.textContent = "+多选"
      } else {
        e.currentTarget.classList.add("MoreAndMore")
        // console.log(e.currentTarget.textContent)
        e.currentTarget.textContent = "×清空"
      }
    })
  }
  // async getnewdata() {
  //   let { data } = await this.$axios.get(`http://127.0.0.1:8888/api/goodstypes?Type=${this.state.Type}`)
  //   // this.setState({
  //   //   goodsData: data.data,
  //   //   tag: data.data[0].flitertag,
  //   //   goodslistdata: data.data[0].goodslistdata
  //   // })
  //   console.log(data.data[0])
  // }
  // /api/goodslist
  getgoodslist = async () => {
    let { data } = await this.$axios.get("http://127.0.0.1:8888/api/goodslist")
    this.setState({
      goodslistdata: data
    })
    // console.log(this.state.goodslistdata)
  }
  getGoodsType = async () => {
    // var res = await this.$axios.get("http://127.0.0.1:8888/api/goodstypes")
    // console.log(res)
  }
  handleGoToInfo = (id) => {
    this.props.history.push(`/prodetail/${this.state.Type}/${this.state.type}/${id}`)
    // console.log(`/${this.state.Type}/${this.state.type}/${id}`)
  }
  sortByLi = (e) => {
    // e.currentTarget.parentElement.childNodes.map(item => {
    //   item.classList.remove("sortByThisLi")
    // })
    let arr = Array.from(e.currentTarget.parentElement.childNodes)
    arr.map(item => {
      item.classList.remove("sortByThisLi")
    })
    e.currentTarget.classList.add("sortByThisLi")
    // console.log(Array.isArray(arr))
  }
}
